<template>
    
<div class="article-page" style="border: 1px seagreen solid;">
    <van-nav-bar title="面经" fixed/>
    <div style="
      height: 50px;
      display: flex;
      padding: 10px;
      justify-content: space-between;
      font-size: 20px;
      margin-top: 40px;
      ">   
        <div>
            <a href="#" style="margin-right: 20px;" @click="docheck('weight_desc')">推荐</a>
            <a href="#" @click="docheck('')">最热</a>
        </div>
        <div>
            <img src="../assets/logo.png" alt="" style="width: 25px;height: 25px;">
        </div>
    </div>
    <van-list 
        style="margin-bottom: 40px;"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
    <!-- 默认情况下，只有在原生的标签，菜鸟绑定DOM原生的事件
    如果想给自定义标签（组件）绑定DOM原生事件，就需要使用native修饰符
    -->
        <ArticleItem v-for="item in list" :key="item.id" :item="item" @click.native="$router.push(`/detall/${item.id}`)"></ArticleItem>
    </van-list>
    
    </div>
</template>
<script>
//导入接口
import { getArticleList } from "@/api/article";
    export default{
        name:'article-page',
        data() {
            return {
                //1.当前页
                current:1,
                //每页数量
                pageSize:10,
                //排序规则
                sorter:'',
                //文章列表
                list:[],
                //加载更多动画
                loading:false,
                //是否全部加载完毕
                finished:false

            }
        },
        methods:{
            //加载下一页
        async  onLoad(){
            //请求列表
            const data =  await  getArticleList({
                current:this.current,
                pageSize:this.pageSize,
                sorter : this.sorter
            })
            
            console.log(data)
            //把下一页的数据添加到list的末尾
            this.list.push(...data.data.rows)
            //每次请求之后页码自增1
            this.current++
            this.loading = false //关闭动画
            //如果服务器数据加载完毕
            if(data.data.rows.length === 0 ){
                this.finished = true
            }
            },
            //切换类型
            docheck(sorter){
                console.log(sorter)
                //修改sorter
                this.sorter = sorter
                //当前数组清空 + 页码页清空
                this.list = []
                this.current = 1
                //渲染新页面
                this.loading = true
                this.onLoad()
            }
        }
    }
</script>
<style>
* {
    margin: 0;
    padding: 0;
}

.article-page a {
    color: lightgray;
}
</style>